<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>What's In a Doctor's Bag Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Script CDNs -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.createjs.com/createjs-2013.02.12.min.js"></script> 
    <script src="js/whatsinadoctorsbag.js"></script>

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet"> <!-- TODO Replace with minified version on release: -->
	
    <style> 
     body {
	padding-top:40px;
     }
     canvas {
	background-color:#76766e;
      }

     html {
	overflow:hidden;
     }

     .carousel-control {
      	height: 80px;
	width:50px;
      	margin-top: 0;
	line-height:50px;
	text-align:center;
      	font-size: 150px;
      	text-shadow: 0 1px 1px rgba(0,0,0,.4);
      	background-color: black;
      	border: 0;
      	z-index: 10;
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> <!-- TODO Replace with minified version on release -->

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <script type="text/javascript">
	var controller;
	$(document).ready(function() {
		
		//Canvas we will be interacting with
		var canvas = document.getElementById("game_canvas");
		setCanvasSize();
		//When the window is resized we need to resize the canvas
		$(window).resize(function() {
			setCanvasSize();
		});	

		/* Make the canvas full screen */
		function setCanvasSize() {		
			canvas.width = $(window).width();
			canvas.height = $(window).height() - 40;
			
			/* For debugging positioning of HTML elements error*/
			//canvas.width = 500;
			//canvas.height = 500;
		}
		controller = new Controller(document.getElementById("game_canvas"));
	});

	//Handle next chapter navigation
	function next() {
		controller.next();
		return false;
	}

	//Handle previous chapter navigation
	function previous() {
		controller.previous();
		return false;
	}


    </script>

  </head>

  <body>
		<div class="navbar navbar-inverse navbar-fixed-top">
		  <div class="navbar-inner">
			<div class="container">
			  <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a class="brand" href="#">What's In a Doctor's Bag</a>
			  <div class="nav-collapse collapse">
				<ul class="nav">
				  <li class="active"><a href="#">Home</a></li>
				  <li><a href="#about">About</a></li>
				  <li><a href="#contact">Contact</a></li>
				</ul>
			  </div><!--/.nav-collapse -->
			</div>
		  </div>
		</div>
		
		<div id="myCarousel" class="carousel slide">
    			<canvas id="game_canvas"></canvas>
			<a class="left carousel-control" href="#" onclick="previous();">&lsaquo;</a>
      			<a class="right carousel-control" href="#" onclick="next();">&rsaquo;</a> 
    		</div>
  </body>
</html>

